<template>
    <div style="margin-top:20px;">
        <a-spin :loading="loading" style="width:100%;">
        <div style="height:515px">
            <a-table :columns="columns" :pagination="false" :data="data" :scroll="{x: 500,
                y: 475}" :scrollbar="true" />
        </div>
        </a-spin>
       
    </div>
</template>
<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import syApi from "@/api/home/sy";
    const loading = ref(false)
    onMounted(() => {
        getKhyeList()
        
    })
    const getKhyeList = () => {
        loading.value = true
        syApi.getKhyeList().then((res) => {
            console.log(res)
            if (res.code == 200 && res.success) {
                let list = []
                res.data.items.forEach(e => {
                    if(e.money != 0){
                        list.push(e)
                    }
                })
                data.value = list.sort((a, b) => a.money - b.money);
                loading.value = false
            }else{
                console.log(e)
                loading.value = false
            }
        }).catch((e) => {
            console.log(e)
            loading.value = false
        })
    }

    const columns = [
      {
        title: '客户名称',
        dataIndex: 'name',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      },
      {
        title: '余额（元）',
        dataIndex: 'money',
        headerCellStyle:{
            backgroundColor:'#FAFAFA',
            fontWeight:'bold',
            color:'#000'
        }
      }
    ];
    const data = ref([]);

</script>